<template>
	<view class="cash-record">
		<view class="tab-view">
			<u-tabs :list="tabs" active-color="#141414" height="100" bar-width="24" font-size="30" inactive-color="#757575"
			 :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>

		<view class='table_list'>
			<view class="list-content" v-for="(item,index) in list" :key="index">
				<view class='item'>
					<view class='item_middle'>
						<view class='type_tit'>{{tabs[current].name}}</view>
					</view>
					<view class='item_rt'>
						<view class='timer'>{{item.add_time}}</view>
						<view class='money'>¥{{item.money}}.00</view>
					</view>
				</view>
			</view>
		</view>

		<pt-nothing 
			text="暂无数据" 
			:fixed="true" 
			v-if="list.length == 0" 
			top="100"
			icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
		</pt-nothing>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" v-if="loadShow" />
		<pt-loading></pt-loading>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [{
					name: '待审核'
				}, {
					name: '已到账'
				}, {
					name: '不通过'
				}],
				page: 0,
				list: [],
				current: 0,
				loadShow: false,
				loadmore: false,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				let data = {
					page: this.page,
					status:this.current + 1
				}
				this.$u.apiWei.WithdrawalLog(data).then(res => {
					res.datas.data.forEach((item) => {
						this.list.push(item)
					})

				})
			},
			change(index) {
				this.current = index;
				this.list = []
				this.init()
			},
			onReachBottom() {
				if (!this.loadmore) {
					this.status = 'nomore';
					return;
				}
				this.status = 'loading';
				this.page++
				setTimeout(() => {
					this.status = 'nomore';
				}, 2000)
				this.init()
			},
		}
	}
</script>

<style lang="scss">
	.cash-record {
		page {
			background-color: #fff;
		}

		.tab-view {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			border-bottom: 6rpx solid #eee;
		}

		.table_list {
			padding-top: 140rpx;
			.list-content{
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #eee;
			}
		}

		.table_tit {
			width: 100%;
			background-color: #fff;
			border-top: 10rpx solid #f9f9f9;
			display: flex;
			font-size: 24rpx;
			color: #5E5E5E;
			text-align: center;
		}

		.table_tit view {
			height: 80rpx;
			line-height: 80rpx;
			flex: 1;
			border-bottom: 1px solid #D2D2D2;
		}

		.table_tit view.active {
			border-bottom: 2px solid #FE9B26;
			color: #FE9B26;
		}

		.table_box {
			width: 100%;
			color: #5E5E5E;
		}

		.item {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			font-size: 20rpx;
			padding: 0 40rpx;
		}

		.item_middle {
			flex: 1;
		}

		.type_tit {
			font-size: 24rpx;
			margin-bottom: 8rpx;
		}

		.item_rt {
			text-align: right;
		}

		.timer {
			color: #C1C1C1;
			margin-bottom: 12rpx;
		}

		.processed {
			color: #00B7EE;
		}

		.succ {
			color: #FE9B26;
		}
	}
</style>
